<template>
  <div class="bigBox">
    <a-space class="top">
      <a-input v-model:value="city" style="width: 180px" placeholder="请输入正确的城市名"></a-input>
      <a-button type="primary" @click="inquireAboutWeather">查询</a-button>
    </a-space>
    <div class="day15" v-if="weatherInfoDay15">
      <div class="scrolleft">
        <a-carousel autoplay :dot-position="dotPosition" :dots="false">
          <ul>
            <li>
              <span>{{ weatherInfoDay15.cityInfo.parent }}</span>
              <span>{{ weatherInfoDay15.cityInfo.city }}</span>
            </li>
            <li>
              <div>{{ weatherInfoDay15.time }}</div>
            </li>
            <li>
              <span>{{ weatherInfoDay15.cityInfo.updateTime }}</span>
            </li>

            <li>
              pm1.0：{{ weatherInfoDay15.data.pm10 }}
            </li>
            <li>
              pm2.5：{{ weatherInfoDay15.data.pm25 }}
            </li>
            <li>
              空气质量：{{ weatherInfoDay15.data.quality }}
            </li>
            <li>
              湿度：{{ weatherInfoDay15.data.shidu }}
            </li>
            <li>
              温度：{{ weatherInfoDay15.data.wendu }}
            </li>
            <li>
              {{ weatherInfoDay15.data.ganmao }}
            </li>
          </ul>
          <ul>
            <li v-for="item in cityDetail.split('\n')">
              {{ item }}
            </li>
          </ul>
        </a-carousel>
      </div>
      <vue3-seamless-scroll :list="weatherInfoDay15.data.forecast" class="scroll" direction="left" :step="0.5">
        <div class="tenFiveDay">
          <ul class="items" v-for="item in weatherInfoDay15.data.forecast">
            <li>
              <svg-icon v-if="item.notice.includes('晴')" name="sunny" width="80" height="80"></svg-icon>
              <svg-icon v-else name="cloudyDay" width="80" height="80"></svg-icon>
            </li>
            <li v-for="info in item">
              {{ info }}
            </li>
          </ul>
        </div>
      </vue3-seamless-scroll>
    </div>
    <Loading :show="show"></Loading>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
import { weatherDetail, weatherInfo15 } from '@/api/index'
import type { CarouselProps } from 'ant-design-vue';
const dotPosition = ref<CarouselProps['dotPosition']>('left');
const city = ref('海盐县')
const show = ref(true)
const cityDetail: any = ref('')
const weatherInfoDay15: any = ref('')
const inquireAboutWeather = async () => {
  show.value = false
  const result0 = await weatherInfo15({ cityname: city.value })
  if (result0.status == 200) weatherInfoDay15.value = result0
  show.value = true
  const result2 = await weatherDetail({ msg: city.value, n: 1 })
  cityDetail.value = result2
}

onMounted(() => {
  inquireAboutWeather()
})

onUnmounted(() => { })
</script>

<style scoped lang="scss">
.bigBox {
  height: 100%;
  position: relative;
  padding: 10px;
  overflow-y: auto;

  .top {
    position: sticky;
    top: 10px;
    z-index: 2;
  }

  .day15 {
    margin-top: 20px;
    overflow: hidden;
    display: flex;
    align-items: center;


    .scrolleft {
      width: 300px;
      border-radius: 10px;
      overflow: hidden;
      margin: 0 10px;

      :deep(.slick-slide) {
        height: 416px;
        overflow: hidden;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0), white 250%),
          linear-gradient(to right, var(--themeColor), #ecf5ff 250%);
        color: white;

        ul {
          width: 100%;
          height: 416px;
          list-style-type: none;
          padding: 0;
          margin: 0;
          overflow-y: auto;
          @include scroll-bar;

          li {
            margin: 5px 0;
            padding: 5px;
            text-indent: 2rem;

            &:nth-child(1) {
              font-size: 20px;
              text-align: center;
              text-indent: 0rem;
            }
          }
        }
      }
    }

    .scroll {
      width: 100%;
      margin: 0 auto;
      overflow: hidden;

      .tenFiveDay {
        width: 100%;
        min-width: 200px;
        min-height: 210px;
        display: flex;
        overflow-x: auto;

        .items {
          width: 250px;
          border-radius: 10px;
          box-shadow: 0 0 5px 2px rgba(128, 128, 128, 0.2);
          height: 100%;
          margin-left: 20px;
          background: linear-gradient(to bottom, rgba(0, 0, 0, 0), white 250%),
            linear-gradient(to right, var(--themeColor), #ecf5ff 250%);
          color: white;
          font-weight: bold;
          list-style-type: none;
          padding: 0;
          margin: 0 10px;
          text-align: center;
          height: 416px;

          li {
            margin: 10px 0;
          }
        }
      }
    }
  }
}
</style>
